import {createElement, render, renderDom} from './element.js'
import diff from './diff'
import patch from './patch'

let vertualDom1 = createElement('ul', {class: 'list'}, [
    createElement('li', {class: 'item'}, ['a']),
    createElement('li', {class: 'item'}, ['b']),
    createElement('li', {class: 'item'}, ['c']),
])

let vertualDom2 = createElement('ul', {class: 'list-group', id: 'aaa'}, [
    createElement('li', {class: 'item'}, ['1']),
    createElement('div', {class: 'item'}, ['b']),
    // createElement('li', {class: 'item'}, ['3']),
])

let patchs = diff(vertualDom1,vertualDom2)
console.log(patchs)

// 将虚拟dom转化为真实dom渲染到页面
let el = render(vertualDom1)
// renderDom(el, window.root)

// 给老的dom结构打补丁
patch(el, patchs)
renderDom(el, window.root)

// console.log(vertualDom);
// console.log(el);

// DOM Diff 比较两个虚拟DOM的区别，比较两个对象的区别
// 根据两个虚拟对象创建出不同的补丁，补丁就是用来更新dom的

// 未实现 在同层级内出现节点位置变化，不需要重新创建节点（可以复用）
// 新增的节点没有被比较 --- index